<template>
    <div>
        <div class="addTag">
            <el-row :gutter="20" justify="center">
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                        <div style="margin:auto;width:100%">
                            <el-button icon="el-icon-circle-plus-outline" :disabled="nameDisabled" type="primary" @click="addTag()">确认添加</el-button>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input  placeholder="新标签名字" :maxlength="6" v-model="name" autocomplete="off"></el-input>
                    </div>
                </el-col>
                <el-col :span="6" :push="6">
                    <div class="grid-content bg-purple">

                        <el-input :disabled="disabled" placeholder="更新后标签名字" :maxlength="6" v-model="nameAlert" autocomplete="off">
                        </el-input>

                    </div>
                </el-col>
                <el-col :span="2" :push="6">
                    <div class="grid-content bg-purple">
                        <div style="margin:auto;width:100%">
                            <el-button :disabled="disabled" type="primary" @click="confirUp">确认更新</el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 用户展示表格 -->
        <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">

            <el-table-column v-for="(item, index) in userAtru" :key="index" :label="item.lable" :prop="item.name">
            </el-table-column>

            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row), dialogFormVisible = true">更新
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            search: '',
            userAtru: [
                {
                    lable: "ID",
                    name: "id"
                },
                {
                    lable: "标签名字",
                    name: "name"
                },
                {
                    lable: "创建时间",
                    name: "createTime"
                },
            ],
            name: '',
            nameAlert: '',
            updateId:"",
            disabled:true,
            nameDisabled:true
        }
    },
    methods: {
        handleEdit(index, row) {
            console.log(index, row);
            this.nameAlert = row.name;
            this.updateId = row.id;
            this.disabled=false
        },
        handleDelete(index, row) {
            console.log(index, row);
            this.ddeleteTag(row.id);

        },/**
       * 获取表格列表
       */
        getTag() {
            this.$api.selectTag(
            ).then(res => {
                // console.log(res)
                if (res.code === 200) {

                    this.tableData = res.data;
                }
            });
        },
        /**
         * 删除tag
         * @param {tagid} id
         */
        ddeleteTag(id) {

            this.$api.deleteTag({
                id: id
            }
            ).then(res => {
                 this.getTag();
            });
        },
        /**
         * 添加tag
         */
        addTag() {
            if (this.name === "") {
                this.$message({
                    message: '不能为空',
                    type: 'error',
                    duration: 200
                });
                return;
            }
            this.$api.insertTag({
                name: this.name
            }).then(res => {
                if (res.code === 200) {
                  this.name = "";
                    this.getTag();
                } else if (res.code === 201) {
                    this.$message({
                        message: '名字重复',
                        type: 'error',
                        duration: 200
                    });
                }
            });
        },
        /**
         * 更新tag
         */
        confirUp() {
            if (this.nameAlert === "") {
                this.$message({
                    message: '不能为空',
                    type: 'error',
                    duration: 300
                });
                return;
            }
            this.$api.updateTag({
                id:this.updateId,
                name: this.nameAlert
            }).then(res => {
                if (res.code === 200) {
                    this.disabled=true;
                    this.nameAlert="";
                    this.getTag();
                } else if (res.code === 201) {
                    this.$message({
                        message: '名字重复',
                        type: 'error',
                        duration: 300
                    });
                }
            });
        }
    },
    created() {
        this.getTag();
    },watch:{
        name(){
            if(this.name.length >=2){
                this.nameDisabled=false;
            }else if(this.name.length <2)
            this.nameDisabled=true;


        },
    nameAlert(){
      if(this.nameAlert.length == "")
        this.disabled=true;





    }

    }
}
</script>
<style scoped >
.addTag {
    margin-top: 20px;

}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>




























